<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id  选择器</title>
    <style type="text/css">
        #red{color: red}
        #green{color: green}

        #sidebar{
            border: 2px dashed #0000ff;
            padding: 10px;
            background-color: #cc2200;
        }

        #sidebar p{
            font-style: italic;
            text-align: right;
            margin-top: 0.5em;
        }
        #sidebar h2{
            font-size: 1em;
            font-weight: normal;
            font-style: italic;
            margin: 0;
            line-height: 1.5;
            text-align: right;
        }

        #newSideBar{
            border: 1px dotted #000;
            padding: 10px;
        }

        /*  ，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。
        老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：如下所示 */
        div#newSideBar{
            border: 1px dotted #000;
            padding: 10px;
        }


    </style>
</head>
<body>
    <!--  # id 选择器的 简单用法 现代布局中 常常用于建立派生选择器 但是  id 选择器只能在文档中出现一次-->
    <p id="red">这个段落是红色</p>
    <p id="green">这个段落是绿色</p>

    <!-- 不可以在内联元素 <span> 中嵌入 <p> 元素  -->
    <div id="sidebar">
        <p>sidebar 中的P 元素</p>
        <h2> sidebar 中的 h2 元素</h2>
    </div>

    <div id="newSideBar">
        this is newSideBar
    </div>
</body>
</html>